<template>
    <Row class="upload-body" :ref="uploadRef">
        <Col span="16">
            <div class="demo-upload-list" v-for="item in uploadList" :key="item.uid">
                <template v-if="item.status === 'finished'">
                    <img width="100px" height="100px" :src="item.url">
                    <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                    </div>
                </template>
                <template v-else>
                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
            </div>
            <!--  :default-file-list="defImgs" -->
            <Upload
                ref="upload"
                :headers="headCofig"
                :show-upload-list="false"
                :default-file-list="defImgs"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                :action="actionUrl"
                style="display: inline-block;width:80px;">
                <div style="width: 80px;height:80px;line-height: 58px;">
                    <Icon type="camera" size="20"></Icon>
                </div>
            </Upload>
        </Col>
        <Modal title="View Image" v-model="visible">
            <img :src="imgUrl + '?imageView/2/w/100/h/100'" v-if="visible" style="width: 100%">
        </Modal>
    </Row>
</template>

<script>
    import { httpUrl } from '../../../libs/httpUrl';
    export default {
        props: {
            uploadRef: {
                default: '',
                type: String
            },
            // 上传地址
            actionUrl: {
                default: httpUrl + '/upload/image',
                type: String
            },
            maxImgNum: {
                default: 1,
                type: Number
            },
            defImgs: Array
        },
        data () {
            return {
                headCofig: {
                    'token': localStorage.getItem('token')
                },
                defaultList: [
                    // {
                    //     'name': 'a42bdcc1178e62b4694c830f028db5c0',
                    //     'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    // }
                ],
                imgName: '',
                imgUrl: '',
                visible: false,
                uploadList: []
            };
        },
        methods: {
            handleView (url) {
                this.imgUrl = url;
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                this.uploadList = this.$refs.upload.fileList;
    
                this.$emit('removeImg', file.url);
            },
            handleSuccess (res, file, fileList) {
                if (res.status === '0') {
                    file.url = res.data;
                    this.uploadList = this.$refs.upload.fileList;
                    this.$emit('uploadSuccess', res.data);
                    this.$Message.success('上传成功');
                } else {
                    this.$Message.error(res.message);
                }
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件类型错误',
                    desc: '上传文件' + file.name + '的类型暂不支持，请选择图片文件上传！'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '图片大小限制',
                    desc: '图片  ' + file.name + '的大小已超过2M,请压缩图片！'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < this.maxImgNum;
                if (!check) {
                    this.$Notice.warning({
                        title: '图片数量限制',
                        desc: '您最多只能上传' + this.maxImgNum + '张图片！'
                    });
                }
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
            // this.uploadList = this.defImgs;
        }
    };
</script>

<style scoped>
    .upload-body {
        background-color: white;
    }
    .upload-title {
        border-bottom: 1px solid #e7e9e9;
        width: 100%;
        padding: 15px;
        position: relative;
    }
    .demo-upload-list{
        display: inline-block;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
